<template>
  <div>
    666
    <input type="text" v-model="msg" @keydown.enter="tianjia" />
    <!-- <p>{{ guolv }}</p> -->
    <!-- 过滤打的字 -->
    <!-- <p>{{ getSum }}</p> -->
    <p>{{ getArr }}</p>
    <!-- 加法 -->
    <!-- 调用 -->
    <button>点击</button>
    <a href="" class="div1" v-on:click.capture.self.passive="btn">
      1
      <a href="" class="div2" v-on:click.capture.self.passive="btn1">
        2
        <a href="" class="div3" v-on:click.capture.self.passive="btn2">3</a>
      </a>
    </a>
    <a href="" @click.prevent="shuaxin">刷新</a>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "",
      arr: [1, 2, 3, 4, 5],
    };
  },
  methods: {
    tianjia() {
      this.arr.push(+this.msg);
      console.log(this.arr);
    },
    btn() {
      console.log("第一个");
    },
    btn1() {
      console.log("第二个");
    },
    btn2() {
      console.log("第三个");
    },
    shuaxin() {
      console.log("a标签");
    },
  },
  computed: {
    guolv() {
      var xing = this.msg.replaceAll("尼玛", "**");
      return xing; //必须写 否则返回undefined
    },
    getSum() {
      var sum = 0;
      this.arr.forEach((item) => {
        sum += item;
      });
      return sum;
    },
    getArr() {
      return this.arr.length;
    },
  },
};
</script>
<style>
a {
  display: block;
}
.div1 {
  width: 500px;
  height: 500px;
  background: pink;
  position: relative;
}
.div2 {
  width: 200px;
  height: 200px;
  position: absolute;
  background: blue;
  right: 0;
  top: 20px;
}
.div3 {
  width: 100px;
  height: 100px;
  background: yellow;
  top: 20px;
  right: 0%;
}
</style>
